<template>
  <el-container>
    <el-dialog
      title="题目预览"
      :visible.sync="timuyulanxsyc"
      @close="videoxsyc = false"
    >
      <el-main>
        <el-row :gutter="24">
          <el-col :span="6">
            <span v-if="previewData.questionType === '1'">【题型】:单选</span>
            <span v-else-if="previewData.questionType === '2'"
              >【题型】:多选</span
            >
            <span v-else>【题型】:简答</span>
          </el-col>
          <el-col :span="6">【编号】:{{ previewData.id }}</el-col>
          <el-col :span="6">
            <span v-if="previewData.difficulty === '1'">【难度】:简单</span>
            <span v-else-if="previewData.difficulty === '2'"
              >【难度】:一般</span
            >
            <span v-else>【难度】:困难</span>
          </el-col>
          <el-col :span="6">【标签】:{{ previewData.tags }}</el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">【学科】:{{ previewData.subject }}</el-col>
          <el-col :span="6">【目录】:{{ previewData.catalog }}</el-col>
          <el-col :span="6">【方向】:{{ previewData.direction }}</el-col>
          <el-col :span="6"></el-col>
        </el-row>
        <hr />
        <el-row :gutter="24">
          <el-col :span="24">
            【题干】:
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col class="tigan" :span="24">
            {{ previewData.question | html2Text() }}
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <span v-if="previewData.questionType === '1'"
              >【题型】:单选题 选项：（以下选中的选项为正确答案）</span
            >
            <span v-else-if="previewData.questionType === '2'"
              >【题型】:多选题 选项：（以下选中的选项为正确答案）</span
            >
            <span v-else
              >【题型】:简答题 选项：（以下选中的选项为正确答案）</span
            >
          </el-col>
        </el-row>
        <!-- 单选多选项 -->
        <div v-for="(item, index) in daanjiexiA.options" :key="index">
          <!-- 单选时 -->
          <div>
            <el-radio
              v-if="daanjiexiA.questionType === '1'"
              :value="item.isRight"
              :label="1"
              >{{ item.code + '.' + item.title }}</el-radio
            >
          </div>
          <!-- 多选时 -->
          <div>
            <el-checkbox
              v-if="daanjiexiA.questionType === '2'"
              :value="item.isRight ? true : false"
              >{{ item.code + '.' + item.title }}</el-checkbox
            >
          </div>
        </div>
        <hr />
        <el-row :gutter="24">
          <el-col :span="24">
            【参考答案】:
            <el-button @click="videoxsyc = true" type="danger"
              >视频答案预览</el-button
            >
            <video
              v-if="videoxsyc"
              width="500"
              :src="daanjiexiA.videoURL"
              autoplay="autoplay"
            ></video>
          </el-col>
        </el-row>
        <hr />
        <el-row :gutter="24">
          <el-col :span="24"
            >【答案解析】: {{ daanjiexiA.answer | html2Text() }}</el-col
          >
        </el-row>
        <hr />
        <el-row :gutter="24">
          <el-col :span="24">【题目备注】: {{ daanjiexiA.remarks }}</el-col>
        </el-row>
      </el-main>
      <el-footer>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-button @click="timuyulanxsyc = false" type="primary"
              >关闭</el-button
            >
          </el-col>
        </el-row>
      </el-footer>
    </el-dialog>
  </el-container>

</template>

<script>
// import { detail } from '@/api/hmmm/questions'
export default {
  props: {
    previewData: {
      type: [Number, Object, String],
      required: true
    },
    daanjiexiA: {
      type: [Number, Object, String],
      required: true
    }
  },
  data() {
    return {
      timuyulanxsyc: false,
      videoxsyc: false
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    // async getList(val) {
    //   console.log(val);
    //   try {
    //     const { data } = await detail({ id: val })
    //     console.log(data)
    //   } catch (err) {
    //     this.$message.error('获取数据失败')
    //   }
    // },
    timuyulan() {
      this.timuyulanxsyc = true
    }
  }
}
</script>

<style scoped lang="less">
.el-row {
  padding: 10px 0;
}
.tigan {
  color: #0000ff;
}
</style>
